<template>
    <QueryBase @onSearch="doQuery">
        <template #search>
            <el-form :inline="false" :model="queryForm" label-position="right" style="width: 40%;" label-width="80">
                <el-form-item :label="t('培训名称')">
                    <el-input v-model="queryForm.name" placeholder="请输入" clearable v-enter="doQuery" />
                </el-form-item>
                <el-form-item :label="t('培训分类')">
                    <el-cascader v-model="queryForm.categoryId" :options="categoryOptions" :placeholder="t('请选择')"
                        :props="{
                            checkStrictly: false
                        }" filterable clearable />
                </el-form-item>
                <el-form-item :label="t('培训状态')">
                    <el-radio-group v-model="queryForm.status">
                        <el-radio v-for="item in statusOptions" :value="item.value">{{ item.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="t('时间')">
                    <el-radio-group v-model="queryForm.timeStatus">
                        <el-radio v-for="item in timeStatusOptions" :value="item.value">{{ item.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </template>
        <template #operation>
            <div></div>
        </template>
        <el-table :data="tableData" :border="true" header-row-class-name="table-header" height="400">
            <el-table-column fixed prop="name" :label="t('名称')" width="180" />
            <el-table-column prop="originImg" :label="t('封面')">
                <template #default="scope">
                    <v-image :src="scope.row.originImg" :style="{ width: '65px', height: '65px' }" fit="contain"
                        :disabled="true"></v-image>
                </template>
            </el-table-column>
            <el-table-column prop="categoryText" :label="t('分类')" width="120" />
            <el-table-column prop="description" :label="t('简介')">
                <template #default="scope">
                    <el-tooltip class="box-item" effect="dark" :content="scope.row.description" placement="top-start">
                        <span>{{ showDesc(scope.row.description) }}</span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="beginTime" :label="t('开始时间')" />
            <el-table-column prop="endTime" :label="t('结束时间')" />
            <el-table-column prop="speaker" :label="t('主讲人')" />
            <el-table-column :label="t('操作')">
                <template #default="scope" v-if="action('edit')">
                    <div style="display: flex;">
                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="teach-result-pn">
            <VPageNavigation :total="total" @on-size-changed="handleSizeChange" @on-page-changed="handleCurrentChange">
            </VPageNavigation>
        </div>
    </QueryBase>
</template>
<script setup lang="ts">
import { Ref, onMounted, reactive, ref, watch } from 'vue';
import { t } from '@/common/locale'
import { deleteBy, queryList } from '@/api/teach';
import { Sysinfo } from '@/common/config';
import elHelper from '@/common/elHelper';
import VImage from '@/components/other/VImage.vue';
import VPageNavigation from '@/components/other/VPageNavigation.vue';
import QueryBase from '@/components/layout/QueryBase.vue';
import { getCategoryMap, getCategoryOptions } from '@/api/category';
import { action } from '@/common/actionHelper';

const queryForm = reactive({
    name: '',
    categoryId: [],
    status: '',
    timeStatus: ''
})
const page = ref(1)
const pageSize = ref(Sysinfo.PageSize)
const tableData: Ref<TeachDataModel[]> = ref([])
const total = ref(0)
const categoryOptions: Ref<CategorySelectOption[]> = ref([])
const statusOptions = ref([{
    label: '全部',
    value: ''
}, {
    label: '新发布',
    value: 'NO_START'
}, {
    label: '进行中',
    value: 'START'
}, {
    label: '已结束',
    value: 'END'
}])
const timeStatusOptions = ref([{
    label: '全部',
    value: ''
}, {
    label: '一月内',
    value: 'MONTH'
}, {
    label: '一周内',
    value: 'WEEK'
}, {
    label: '半年内',
    value: 'HALF_YEAR'
}, {
    label: '半年以上',
    value: 'YEAR'
}])

const doQuery = async () => {
    if (!action('view')) {
        elHelper.showErrorMsg('权限不足')
        return
    }
    const loading = elHelper.showLoading()
    let arr = queryForm.categoryId as string[]
    const categoryId = arr ? arr[arr.length - 1] : ''
    const re = await queryList('train', {
        name: queryForm.name,
        categoryId: categoryId,
        status: queryForm.status,
        timeStatus: queryForm.timeStatus,
        pageSize: pageSize.value,
        to: page.value
    })
    if (re.isSuccess) {
        let list = re.data || []
        const map = await getCategoryMap('TRAIN')
        list.forEach((item) => {
            const opt = map.get(item.categoryId)
            item.categoryText = opt ? opt : ''
        })
        tableData.value = list

        total.value = re.totalRow || 0
        page.value = re.pageNum || 1
    } else {
        elHelper.showErrorMsg(re.msg)
    }
    elHelper.closeLoading(loading)
}

const handleSizeChange = (val: number) => {
    pageSize.value = val
    doQuery()
}
const handleCurrentChange = (val: number) => {
    page.value = val
    doQuery()
}
const handleDelete = async (data: TeachDataModel) => {
    if (!await elHelper.showConfirmMsg('确定要删除吗?(删除后将无法恢复)')) return
    let loading = elHelper.showLoading()
    const re = await deleteBy(data)
    if (re.isSuccess) {
        elHelper.showSuccessMsg('操作成功')
        await doQuery()
    } else {
        elHelper.showErrorMsg(re.msg)
    }
    elHelper.closeLoading(loading)
}
const showDesc = (val: string) => {
    if (val && val.length > 20) {
        return val.substring(0, 20) + '...'
    } else {
        return val
    }
}
onMounted(async () => {
    const l = await getCategoryOptions('TRAIN')
    categoryOptions.value = l
    doQuery()
})
</script>
<style lang="scss" scoped>
.teach-result-pn {
    padding-top: 15px;
    display: flex;
    justify-content: flex-end;
}
</style>